<template>
	<view class="container">
		<view class="header_area flex"><!-- <image src="../../static/group_img/header_bg.png" class="header_area_bg" mode="aspectFill"></image> --></view>
		<view class="cate-section">
			<view v-for="(item, index) in categoryList" :key="index" @click="navTo(item.url)" class="cate-item">
				<image :src="item.imgUrl"></image>
				<text>{{ item.title }}</text>
			</view>
		</view>
		<view class="goods_list_area">
			<view class="goods_list_title">积分兑好礼</view>
			<view class="goods_border"></view>
			<view class="integr_wrap flex">
				<view class="integr_box" v-for="(item, index) in list_arr" :key="index" @click="navTo(`/pages_integral/integral/intedetail?integerGoodsId=${item.integerGoodsId}`)">
					<image :src="item.img" mode="" class="integr_img"></image>
					<view class="integr_title">{{ item.spuTitle }}</view>
					<view class="integr_points" v-if="item.type === 1">{{ item.integral }}积分</view>
					<view v-if="item.type === 2" class="flex">
						<view class="integr_points">{{ item.integral }}积分</view>
						<view class="integr_money" v-if="item.amount">+{{ item.amount / 100 }}元</view>
					</view>
					<view class="integr_has">已兑{{ item.sales }}份</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list_arr: [],
			categoryList: [
				{ imgUrl: '../../static/integral/one.png', title: '积分任务', url: '/pages_integral/integral/task' },
				{ imgUrl: '../../static/integral/two.png', title: '积分兑劵', url: '/pages_integral/integral/exchange' },
				{ imgUrl: '../../static/integral/three.png', title: '兑换记录', url: '/pages_integral/integral/record' },
				{ imgUrl: '../../static/integral/four.png', title: '积分明细', url: '/pages_integral/integral/intesubsidiary' },
				{ imgUrl: '../../static/integral/five.png', title: '积分规则', url: '/pages_integral/integral/Interules' }
			]
		};
	},
	onHide() {},
	destroyed() {},
	onShow() {
		this.get_goods_list();
	},
	onLoad() {
	},
	onShareAppMessage() {
		return {
			title: '积分商城',
			// imageUrl: this.list_arr.imgList[0] + '?x-oss-process=style/600px',
			path: '/pages/integral/integral'
		};
	},
	methods: {
		navTo(url) {
			// if(!this.hasLogin){
			// 	url = '/pages/public/login';
			// }
			uni.navigateTo({
				url
			});
		},
		//获取积分商品列表
		get_goods_list() {
			this.$api.request('integralActivity', 'IntegralGoodsList', failres => {
				this.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {
				this.list_arr = res.data;
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	width: 100%;
	min-height: 100vh;
	background: #ffffff;
	flex-direction: column;
	align-items: center;
}
.flex {
	display: flex;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.cate-section {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 30upx 22upx;
	background: #fff;
	margin-top: 18upx;
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
	}
	image {
		width: 88upx;
		height: 88upx;
		margin-bottom: 14upx;
		border-radius: 50%;
		// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
	}
}

.goods_list_area {
	width: 100%;
	.goods_list_title {
		width: 94%;
		margin: 25upx auto 10upx;
		text-indent: 28upx;
		font-size: 30upx;
		font-weight: bold;
		color: #000;
		border-left: 4px #ff135c solid;
	}
	.goods_border {
		border-bottom: solid #c9c9c9 1px;
		margin: 18upx auto;
		width: 94%;
	}
	.integr_wrap {
		width: 94%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 15upx 0;
		.integr_box {
			width: 336upx;
			box-shadow: 2upx 2upx 12upx #c0c4cc;
			border-radius: 15upx;
			margin-bottom: 35upx;
			.integr_img {
				width: 336upx;
				height: 330upx;
				border-radius: 15upx 15upx 0 0;
			}
			.integr_title {
				color: #424242;
				font-size: 24upx;
				padding-left: 20upx;
				line-height: 45upx;
				font-weight: 600;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.integr_points {
				color: #ff135c;
				font-size: 22upx;
				padding-left: 20upx;
				line-height: 45upx;
			}
			.integr_money{
				color: #ff135c;
				font-size: 22upx;
				line-height: 45upx;
			}
			.integr_has {
				color: #aeaeae;
				font-size: 22upx;
				padding-left: 20upx;
				line-height: 45upx;
			}
		}
	}
}
</style>
